<!DOCTYPE html>
<html>
<head>
    <title>data linkage</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="./vendor/avalon/avalon.js" ></script>
    <style>
    </style>
    <script type="text/javascript">



        var model1 = avalon.define({
            $id: "test1",
            data: [{checked: false}, {checked: false}, {checked: false}],
            allchecked: false,
            checkAll: function() {
                var bool = model1.allchecked = this.checked
                model1.data.forEach(function(el) {
                    el.checked = bool
                })
            },
            checkOne: function() {
                if (!this.checked) {
                    model1.allchecked = false
                } else {//avalon已经为数组添加了ecma262v5的一些新方法
                    model1.allchecked = model1.data.every(function(el) {
                        return el.checked
                    })
                }
            }
        })



        var model2 = avalon.define({
            $id: "test2",
            data: [{checked: false}, {checked: false}, {checked: false}],
            allchecked: false,
            
            checkOne: function() {
                if (!this.checked) {
                    model2.allchecked = false
                } else {//avalon已经为数组添加了ecma262v5的一些新方法
                    model2.allchecked = model2.data.every(function(el) {
                        return el.checked
                    })
                }
            }
        })
        model2.$watch("allchecked", function(newVal, oldVal) {
            console.log(newVal, oldVal)
            var bool = newVal
            model2.data.forEach(function(el) {
                el.checked = bool
            })
        })


 

    </script>
        
</head>
<body>


    <!-- 方式一： data-duplex-changed  用于ms-duplex绑定，值改变后触发； 参数：当前元素的值-->
    <table ms-controller="test1" border="1">
        <tr>
            <td><input type="checkbox" ms-duplex-radio="allchecked" data-duplex-changed="checkAll"/>全选</td>
        </tr>
        <tr ms-repeat="data">
            <td><input type="checkbox" ms-duplex-radio="el.checked" ms-data-index=$index data-duplex-changed="checkOne"/>xxxxxxxxxxxx</td>
        </tr>
    </table>



    <!-- 方式二： 用ms-duplex与$watch  当我们改动全选复选框，会通过ms-duplex同步allchecked属性，而allchecked的值改变时，就会触发对应的$watch回调 -->
    <table ms-controller="test2" border="1">
        <tr>
            <td><input type="checkbox" ms-duplex-radio="allchecked"/>全选</td>
        </tr>
        <tr ms-repeat="data">
            <td><input type="checkbox" ms-duplex-radio="el.checked" ms-data-index=$index data-duplex-changed="checkOne"/>oooooooooooo</td>
        </tr>
    </table>




</body>
</html>
